<?php include('head.php')?>

<style>
td {text-align: left;vertical-align: top;}
.mainbody{background: url(gallery/background.png) repeat;}
.mdiv{width: 960px;height: 100%;vertical-align: middle;padding-bottom: 122px;}
.mdiv>div{float:left;}
.mdiv img{cursor: pointer;}
.mdiv td{position: relative;}
.mdiv td img{position: absolute;}
.img1{width: 235px;padding-top: 80px;}
.img2{width: 225px;padding-top: 220px;}
.img3{width: 290px;height: 290px;padding-top: 30px;}
.img4{width: 165px;padding: 20px 0 0 125px;}
.img5{width: 190px;padding-top: 120px;}
</style>
</head>

<body class="mainbody">
  <table cellpadding=0 cellspacing=0>
    <tr>
      <td id="title"><div><img src="common/logo_gallery.png" /></div></td>
		  <td class="mdiv">
		    <table cellspacing=0 cellpadding=0 width=960 height=600px>
		      <tr>
		        <td class="img1" rowspan=2><a href="gallerychoose.php?a=1"><img src="gallery/baby.png"></img></a></td>
		        <td class="img2" rowspan=2><a href="gallerychoose.php?a=2"><img src="gallery/family.png"></img></a></td>
		        <td class="img3"><a href="gallerychoose.php?a=3"><img src="gallery/pregnancy.png"></img></a></td>
		        <td class="img5" rowspan=2><a href="gallerychoose.php?a=5"><img src="gallery/fashion.png"></img></a></td>
		      </tr>
		      <tr>
		        <td class="img4"><a href="gallerychoose.php?a=4"><img src="gallery/glamour.png"></img></a></td>
		      </tr>
		    </table>
		  
		  </td>
		  <td id="right">&nbsp;</td>
    </tr>
  </table>
  <div align="center">
    <?php include('menu.php')?>
  </div>
  <script type="text/javascript">
  
  $(function(){
	  $(".mdiv img").mouseover(function(){
		  var iwidth = $(this).attr("width");
	    $(this).animate({"width":iwidth*1.02},200);
	    });
	  $(".mdiv img").mouseout(function(){
	    var iwidth = $(this).attr("width");
	    $(this).animate({"width":iwidth/1.02},200);
	    });
  });
  </script>
</body>
</html>
